<template>
  <div class="add-goods">
    <!-- 面包屑 -->
    <div class="bread-crumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/goods' }"
          >商品管理</el-breadcrumb-item
        >
        <el-breadcrumb-item>商品{{theme}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 表单 -->
    <div class="myForm">
      <el-form
        :model="goodsForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="类目选择" prop="category">
          <el-button type="primary" @click="openCategoryDialog"
            >类目选择</el-button
          >
          <span v-if="goodsForm.category != ''">
            已选中的类目：{{ goodsForm.category }}
          </span>
        </el-form-item>
        <el-form-item label="商品时间">
          <el-col :span="11">
            <el-form-item prop="date">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="goodsForm.date"
                style="width: 100%"
                format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col class="line" :span="2" style="text-align: center">-</el-col>
          <el-col :span="11">
            <el-form-item prop="time">
              <el-time-picker
                placeholder="选择时间"
                v-model="goodsForm.time"
                style="width: 100%"
                value-format="HH:mm:ss"
              ></el-time-picker>
            </el-form-item>
          </el-col>
        </el-form-item>
        <el-form-item label="商品名称" prop="title">
          <el-input v-model="goodsForm.title"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" prop="price">
          <el-input v-model="goodsForm.price"></el-input>
        </el-form-item>
        <el-form-item label="商品数量" prop="num">
          <el-input v-model="goodsForm.num"></el-input>
        </el-form-item>
        
        <el-form-item label="商品卖点" prop="sellPoint">
          <el-input v-model="goodsForm.sellPoint"></el-input>
        </el-form-item>
        <el-form-item label="商品图片" prop="image">
          <!-- <el-button type="primary">上传图片</el-button> -->
          <el-upload
            ref="upload"
            class="upload-demo"
            action="/upload/pic"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            list-type="picture"
            :auto-upload="false"
          >
            <el-button type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">
              只能上传jpg/png文件，且不超过500kb
            </div>
          </el-upload>
        </el-form-item>
        
        
        <!-- wangEditor 官网：https://www.wangeditor.com/ -->
        <el-form-item label="商品描述" prop="desc">
          <!-- <el-input type="textarea" v-model="goodsForm.desc"></el-input> -->
          <WangEditor
            ref="we"
            @sendEditor="sendEditor"
          ></WangEditor>
        </el-form-item>
        <el-form-item class="form-btns">
          <el-button type="primary" @click="submitForm()"
            >确定</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 类目选择弹框 -->
    <el-dialog
      width="40%"
      :visible.sync="categoryDialogVisible"
      :title="categoryDialogTitle"
      :modal-append-to-body="false"
    >
      <TreeGoods @sendTreeData="sendTreeData" />
    </el-dialog>
  </div>
</template>

<script>
import WangEditor from "./WangEditor.vue"
import TreeGoods from "./TreeGoods.vue";
export default {
  components: {
    TreeGoods,WangEditor
  },
  data() {
    return {
      goodsForm: {
        title: "", //商品名称
        price: "",
        num: "",
        sellPoint: "",
        image: "",
        desc: "",
        cid: "",//商品类目的id
        category: "", //商品类目
        date: "", //商品日期
        time: "", //商品时间
      },
      rules: {
        //校验规则
        title: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          { min: 2, max: 8, message: "长度在 2 到 8 个字符", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入价格", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
      },
      categoryDialogVisible: false, //类目选择窗口
      categoryDialogTitle: "",
      fileList: [],
      theme: "添加"
    };
  },
  mounted() {
    // console.log(this.$route.query);
    if(this.$route.query) {
      if(this.$route.query.goodsForm && this.$route.query.goodsForm !== '[object Object]') {
        this.goodsForm = this.$route.query.goodsForm;
        this.$refs.we.setHTML(this.goodsForm.desc)
        this.theme = "编辑"
      } else if(this.$route.query.goodsForm == '[object Object]'){

      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log('获取输入的信息',this.goodsForm);
          this.$message.success('请打开控制台查看打印信息，'+this.theme+'成功');
          this.$router.back()
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$refs.upload.clearFiles()
      this.$refs.we.clear()
    },
    //打开商品类目窗口
    openCategoryDialog() {
      this.categoryDialogVisible = true;
      this.categoryDialogTitle = "商品类目选择";
    },
    sendTreeData(data) {
      this.goodsForm.cid = data.id
      this.goodsForm.category = data.name;
    },
    handleRemove(file, fileList) {
      // console.log(file, fileList);
    },
    handlePreview(file) {
      // console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    /**
     * 接受wangeditor数据
     */
    sendEditor(val) {
      this.goodsForm.desc = val;
    }
  },
};
</script>

<style lang="less" scoped>
.add-goods {
  padding: 16px;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}
.bread-crumb {
  padding: 16px;
  background-color: #fff;
  border: 1px solid #eee;
  margin-bottom: 16px;
}
.myForm {
  background: #fff;
  padding: 16px;
}
/deep/ .form-btns .el-form-item__content{
  float: right;
}
</style>